<template>
  <div>
    {{ getUserList() }}{{ getRoleList() }}
    <div class="header">

      <template>
        <el-button type="success" size="medium" @click="toAdd">添加</el-button>
        <span class="query_span">姓名:</span>
        <input type="text" v-model="name" class="el-input__inner"></input>
        &#8194;&#8194;职位:
        <el-select v-model="roleId" placeholder="全部">
          <el-option label="全部" :value="-1"></el-option>
          <el-option v-for="(o,i) in roleList" :label="o.name" :value="o.id"></el-option>
        </el-select>
        <el-button type="warning" size="medium" @click="query">搜索</el-button>
        <span class="status_span"></span>
        <el-radio-group v-model="valid" @change="queryByValid()">
          <el-radio-button :label="0">离职</el-radio-button>
          <el-radio-button :label="1">在职</el-radio-button>
          <el-radio-button :label="-1">全部</el-radio-button>
        </el-radio-group>
      </template>
    </div>

    <div class="tableDiv">
      <el-table :data="userList" style="width: 100%" :header-cell-style="{background:'#DCDCDC',color:'#606266'}">
        <el-table-column width="100" prop="id" label="用户编号" header-align="center" align="center"></el-table-column>
        <el-table-column width="120" prop="username" label="账号名称" header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="120" prop="name" label="真实姓名" header-align="center" align="center"></el-table-column>
        <el-table-column width="100" prop="sex" label="性别" header-align="center" align="center"></el-table-column>
        <el-table-column width="120" prop="roleName" label="职位" header-align="center" align="center"></el-table-column>
        <el-table-column width="180" prop="mobile" label="手机号" header-align="center" align="center"></el-table-column>
        <el-table-column width="200" prop="email" label="邮箱" header-align="center" align="center"></el-table-column>
        <el-table-column width="130" prop="birthday" label="生日" header-align="center" align="center"></el-table-column>
        <el-table-column width="100" label="住址" header-align="center" align="center">
          <template slot-scope="user">
            <el-tooltip class="item" effect="dark" :content="userList[user.$index].address" placement="bottom">
              <el-button size="mini">详情</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column width="120" prop="salary" label="工资" header-align="center" align="center"></el-table-column>
        <el-table-column width="100" prop="valid" label="状态" header-align="center" align="center"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="s">
            <el-button type="primary" size="mini" @click="toUpdate(s.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(s.$index,s.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tableBottom">
        <div class="tableBottomPage">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.page"
            :page-sizes="page.pageSizeList"
            :page-size="page.pageSize"
            layout="prev,pager,next,total,sizes"
            :total="page.total">
          </el-pagination>
        </div>
      </div>
    </div>

    <el-dialog title="用户信息" :visible.sync="dialogVisible" width="20%">
      <el-form :model="m" label-width="80px">
        <el-form-item label="账号名称" class="item">
          <el-input size="mini" v-model="m.username"></el-input>
        </el-form-item>

        <el-form-item v-show="isAddOperation === true" class="itemPassword" ref="itemPassword" label="密码">
          <el-input size="mini" v-model="m.password"></el-input>
        </el-form-item>

        <el-form-item class="item" label="真实姓名">
          <el-input size="mini" v-model="m.name"></el-input>
        </el-form-item>
        <el-form-item class="item" label="性别">
          <el-radio-group v-model="m.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="item" label="职位">
          <el-select size="mini" v-model="m.roleId" placeholder="请选择">
            <el-option v-for="(o,i) in roleList" :label="o.name" :value="o.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="item" label="手机号">
          <el-input size="mini" v-model="m.mobile"></el-input>
        </el-form-item>
        <el-form-item class="item" label="邮箱">
          <el-input size="mini" v-model="m.email"></el-input>
        </el-form-item>
        <el-form-item class="item" label="生日">
          <el-date-picker
            size="mini"
            v-model="m.birthday"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="item" label="住址">
          <el-input type="textarea"
                    autosize
                    placeholder="请输入内容" size="mini" v-model="m.address"></el-input>
        </el-form-item>
        <el-form-item class="item" label="工资">
          <el-input size="mini" v-model="m.salary"></el-input>
        </el-form-item>
        <el-form-item class="item" label="状态">
          <el-radio-group v-model="m.valid">
            <el-radio :label="1">在职</el-radio>
            <el-radio :label="0">离职</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sub">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>


  </div>

</template>

<script>
import axios from "axios";
axios.defaults.headers.get['content-type'] = 'application/json;charset=UTF-8'

export default {
  name: 'UserM',
  data() {
    return {
      isAddOperation: false,
      dialogVisible: false,
      refreshR: 0,
      refresh: 0,
      name: ' ',
      roleId: -1,
      valid: 1,
      m: {},
      userList: [],
      roleList: [],
      page: {
        page: 1, pageSizeList: [5, 10,20], pageSize: 10, total: 50
      }
    }
  },
  methods: {
    getUserList: function () {
      if (this.refresh === 0) {
        this.refresh++;
        var that = this;
        this.name = this.name.trim() === ''?' ':this.name;
        axios.get("http://localhost:8081/user?name=" + this.name + "&roleId=" + this.roleId + "&valid=" + this.valid + '&page=' + this.page.page + '&pageSize=' + this.page.pageSize).then(function (result) {
          if (result.data.status === 1){
            that.userList = result.data.data.list;
            that.page.total = result.data.data.total;
            for (var i = 0; i < that.userList.length; i++) {
              that.userList[i].valid = that.userList[i].valid == 1 ? '在职' : '离职';
              that.userList[i].sex = that.userList[i].sex == 1 ? '男' : '女';
            }
          }else {
            that.messageAlert(result.data.status,result.data.msg);
          }


        })
      }
    },
    query: function () {
      this.refresh = 0;
      this.getUserList();
    },

    handleSizeChange: function (pageSize) {
      this.page.pageSize = pageSize;
      this.refresh = 0;
      this.getUserList();
    },
    handleCurrentChange: function (page) {
      this.page.page = page;
      this.refresh = 0;
      this.getUserList();
    },

    getRoleList: function () {
      if (this.refreshR === 0) {
        this.refreshR++;
        var that = this;
        axios.get("http://localhost:8081/role/1").then(function (result) {
          that.roleList = result.data.data;
        })
      }
    },


    toAdd: function () {
      this.dialogVisible = true;
      this.isAddOperation = true;
      this.m = {password: 666};
    },
    toUpdate: function (row) {
      this.dialogVisible = true;
      this.isAddOperation = false;
      this.m = JSON.parse(JSON.stringify(row));
      this.m.valid = this.m.valid == '在职' ? 1 : 0;
      this.m.sex = this.m.sex == '男' ? 1 : 0;
    },
    sub: function () {
      this.cancel();
      var that = this;
      if (this.isAddOperation) {
        axios.post("http://localhost:8081/user", this.m).then(function (result) {
          that.messageAlert(result.data.status, result.data.msg);
          that.refresh = 0;
          that.getUserList();
        })
      } else {
        axios.put("http://localhost:8081/user", this.m).then(function (result) {
          that.messageAlert(result.data.status, result.data.msg);
          that.refresh = 0;
          that.getUserList();
        })
      }
    },
    cancel: function () {
      this.dialogVisible = false;
    },

    del: function (index, row) {
      var that = this;
      axios.delete("http://localhost:8081/user/" + row.id).then(function (result) {
        that.messageAlert(result.data.status, result.data.msg);
        that.refresh = 0;
        that.getUserList();
      })
    },

    queryByValid: function () {
      this.refresh = 0;
      this.page.page = 1;
      this.getUserList();
    },


    messageAlert: function (flag, msg) {
      if (flag === 1) {
        this.$message({
          message: msg,
          center: true,
          type: "success"
        })
      } else {
        this.$message({
          message: msg,
          center: true,
          type: "error"
        })
      }
    }

  }
}

</script>

<style>
.item {
  margin-top: -12px;
}

.itemPassword {
  margin-top: -12px;
}

.header {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}


.tableDiv {
  margin-top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.tableBottom {
  height: 60px;
}

.tableBottomPage {
  margin-top: 30px;
}

.query_span {
  margin-left: 100px;
}

.el-input__inner {
  width: 250px;
}

.status_span {
  margin-left: 150px;
}


</style>
